<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{background: -webkit-linear-gradient(top,#fff,pink);}
		ul{padding:0;margin:0;list-style: none;}
		
		.container{
			max-width:1200px;
			margin:0 auto;
		}
		.container>div{
			background: #f3f3f3;
			padding: 20px 40px;
			border-radius: 10px;
			margin-bottom: 20px;
		}
		div.top{
			position: fixed;
			bottom:10px;
			right:10px;
			background: #9f9f9f;
			padding:10px;
		}
		.interview li{
			border-radius: 10px;
			border:1px solid #d0d0d0;
			box-shadow: 10px 10px 10px #d0d0d0;
			margin-bottom: 20px;
			padding:20px 40px;
		}
		a{text-decoration: none;color:#333;}
		.nav li{padding:5px 10px;}
	</style>
</head>
<body>
	<div class="container">
	<ul class="nav" id="top">
		<li><a href="#question">面试提问注意点</a></li>
		<li><a href="#jscode">js代码规范</a></li>
		<li><a href="#mokuaihua">模块化理解</a></li>
		<li><a href="#youhua">网页优化原则</a></li>
		<li><a href="#MVC">MVC</a></li>
		<li><a href="#angular">Angular.js</a></li>
		<li><a href="#kuayu">跨域问题</a></li>
		<li><a href="#httpRequst">一次完整的HTTP请求所经历的7个步骤</a></li>
		<li><a href="#interviewHtml">面试题--HTML</a></li>
	</ul>
	
	<div id="question">
		<h2>面试提问</h2>
		<div>
			<h4>
				1、如果面试官职位、级别较低（中层经理及以下职位），可以问以下几个问题：
			</h4>
			<p>
				(1)如何评估员工在试用期内的表现？考核标准是什么呢？
			</p>
 			<p>
 				(2)公司采取了什么样的方法和措施，来保证（新）员工的成长？
 			</p>
 			<p>
 				(3)这个职位在贵公司的发展前景是怎么样的？有何种晋升机制？在什么条件下，才能够得到晋升的机会？ 
 			</p>
			<p>
 				(4)请问您当初选择这家公司的原因是什么？在工作一段时间以后，您又是如何评价这家公司的呢？这家公司有什么优点和缺点？
 			</p>
 			<p>
 				<b>(5)对于优秀的人才来说，贵公司最大的吸引力在哪里？为了吸引和留住优秀的人才，公司采取了哪些具体的措施？（上面几个问题，都可以不问，但唯独这一个，是一定要问的，至关重要。）</b>
 			</p>
			<h4>
 				2、如果面试官级别、职位较高，至少是总监及以上级别的（一般会在终面安排这种高级别的面试），可以问这几个问题：
 			</h4>
			<p>
				(1)贵公司的发展目标和方向是什么？ （选择一个有目标、有理想的公司很重要。公司都不知道向哪里去，你觉得这样的公司会有前途吗？）
			</p>
			<p>
				(2)与同行业的竞争者相比，贵公司的核心竞争优势在什么地方？ （竞争如此激烈，你要想活下去，总得有两把刷子吧？没有竞争优势，说不定半年后倒闭了，那么，你的职业生涯也就结束了。）
			</p>
			<p>
				(3)您觉得这个行业在未来五年会发生怎么样的变化？如何应对这种变化？（长久的发展，拼的是管理层的战略布局。不懂战略，可能这家公司明天就会倒掉。有战略，看得远，才能够走得远。这样的公司，才是好公司。）
			</p>
			<div>
				第一个问题：你能干这份工作吗？或有可能问：你的优势在哪里？（优势） <br>
				第一个答案：请举出三个有关态势/行动/成效的例子，说明你在面试官最关心的领域具备什么样的优势。 <br>
				第二个问题：你热爱这份工作吗？或有可能问：你希望做什么呢？（动机） <br>
				第二个答案：根据你的价值和你的喜好定位你打算申请的岗位。 <br>
				第三个问题：我能忍受和你一起共事吗？或有可能问：你属于哪种类型的人？（匹配度） <br>
				第三个答案：根据你的价值以及你喜欢共事的人定位你正在面试的组织。
			</div>
		</div>
	</div>

	<div id="jscode">
		<h1>常用js编写代码规范</h1>
		<div>
			<h4>1. 保证代码压缩后不出错。</h4> 
			<p>
				对于大型的JavaScript项目，一般会在产品发布时对项目包含的所有JavaScript文件进行压缩处理，这一般会去掉开发时写的注释，除去所有空格和换行，甚至可以把原来较长的变量名替换成短且无意义的变量名，这样做的目的是加快文件的下载速度，同时也减小网站访问带来的额外数据流量，另外在代码保护上也起到了一点点作用，至少压缩后的代码即使被还原还是没那么容易一下读懂的。
			</p>	
			<p>
				要想代码能正确通过压缩，一般要求语句都要以分号正常结束，大括号也要严格结束等，具体还要看压缩工具的要求。所以如果一开始没有按标准来做，等压缩出错后再回去找错误那是浪费时间。
			</p>

			<h4>2. 保证代码能通过特定IDE的自动格式化功能。</h4>	
			<p>
				一般较为完善的开发工具（比如Aptana Studio）都有代码"自动格式"化功能，这一功能帮助实现统一换行、缩进、空格等代码编排，你可以设置自己喜欢的格式标准，比如左大括号{是否另起一行。达到这个要求的目的在于方便你的开发团队成员拿你代码的一个副本用IDE自动格式化成他喜欢或熟悉的风格进行阅读。你同事需要阅读你的代码，可能是因为你写的是通用方法，他在其它模块开发过程中也要使用到，阅读你的代码能最深入了解方法调用和实现的细节，这是简单API文档不能达到的效果。
			</p>

			<h4>3. 使用标准的文档注释。 <small>有利于在方法调用处看到方法的具体传参提示,也更方便团队成员阅读你的代码</small>	</h4>
			<p>
				这一要求算是最基本的，这有利于在方法调用处看到方法的具体传参提示，也可以利用配套文档工具生成html或其它格式的开发文档供其他团队成员阅读，你可以尝试使用jsdoc-toolkit。如果你自动生成的API是出自一个开放平台，就像facebook.com应用，那么你的文档是给天下所有开发者看的。另外编写完整注释，也更方便团队成员阅读你的代码，通过你的参数描述，团队成员可以很容易知道你编写的方法传参与实现细节。当然也方便日后代码维护，这样即使再大的项目，过了很长时间后，回去改点东西也就不至于自己都忘记了当时自己写的代码是怎么一回事了。
			</p>
			
			<h4>4. 使用规范有意义的变量名。 <small>使用规范有意义的变量名可以提高代码的可读性</small> </h4>
			<p>
				使用规范有意义的变量名可以提高代码的可读性，作为大项目开发成员，自己写的代码不仅仅要让别人容易看懂。开发大项目，其实每个人写的代码量可能都比较大，规范命名，日后自己看回自己的代码也显的清晰易懂，比如日后系统升级或新增功能，修改起代码来也轻松多了。如果到头发现自己当初写的代码现在看不太懂了，那还真是天大的笑话了。当然，使用有意义的变量名也尽量使用标准的命名，比如像这里：var me = this也许没有var self = this好，因为self是Python中的关键字，在Python中self就是通常语言this的用法。再看下面一个例子，加s显然比没有加来的科学些，这样可以知道这个变量名存的是复数，可能是数组等： var li = document.getElementsByTagName('li'); var lis = document.getElementsByTagName('li'); 
			</p>

			<h4>5. 不使用生偏语法 <small>规范编码少搞怪，不把简单问题复杂化，不违反代码易读性原则</small> </h4>
			<p>
				JavaScript作为一门动态脚本语言，灵活性既是优点也是缺点，众所周知，动态语言不同层次开发人员对实现同样一个功能写出来的代码在规范或语法上会存在较大的差别。不管怎么样，规范编码少搞怪，不把简单问题复杂化，不违反代码易读性原则才是大家应该做的。比如这语句：typeof(b) == 'string' && console.log(b)应该改为：if(typeof(b) == 'string') console.log(b)，像前面那种用法，利用了&&运算符解析机制：如果检测到& &前语句返回false就不再检测后面语句，在代码优化方面也有提到把最可能出现的情况首先判断，像这种写法如果条件少还好，如果条件较多而且语句也长，那代码可读性就相当差。又比如：+function(a){var p = a;}( 'a')应该改为：(function(a){var p = a;})( 'a')，其实function前面的+号与包含function的()括号作用是一样的，都是起运算优先作用，后者是常见且容易看明白的防止变量污染的做法，比如好些流行JavaScript框架就是采用后面这种方式。再说个降低代码可读性的例子，如：function getPostionTxt(type){return type == 2 ? "野外" : (type == 3 ? "商城" : (type == 4 ? "副本" : null));}应该改成：function getPostionTxt(type){var typeData={"2":"野外","3":"商城","4":"副本"};if (typeData[type]) return typeData[type]; else return null;}。如果type是从0开始不间断的整数，那么直接使用数组还更简单，这种结果看起来就清晰多了，看到前面那种多层三元表达式嵌套头不晕吗。
			</p>

			<h4>6. 不在语句赋值地方出现中文语句</h4>
			<p>
				赋值语句中不应该出现中文我想一般人都知道，虽然这样做不影响程序运行，但是显然有背行业标准要求，当然我们也不是在使用"易语言"做开发。关于这一个问题，我本来不想把它拿出来说的，但我确实遇到有人这样做的，也不知道是不是因为他的英语实在太烂了，至少还可以用拼音吧，另外寻求翻译工具帮忙也不错的选择。我举例如下，像以下写法出现在教学中倒还可以理解：this.user['名字'] = '张三' 或者 this.user.名字 = '张三'。
			</p>
			
			<h4>7. 明确定义函数固定数量的参数</h4>
			<p>
				固定数量参数的函数内部不使用arguments去获取参数，因为这样，你定义的方法如果包含较多的脚本，就不能一眼看到这个方法接受些什么参数以及参数的个数是多少。比如像下面： var $ = function(){return document.getElementById(arguments[0]);}应该改成：var $ = function(elemID){return document.getElementById(elemID);} 
			</p>
			
			<h4>8. 不必热衷动态事件绑定</h4>
			<p>
				虽然知道事件可以动态绑定，比如使用addEventListener或者使用jQuery的bind方法，也知道采用动态事件绑定可以让XHTML更干净，但是一般情况下我还是建议直接把事件写在DOM节点上，我认为这样可以使代码变得更容易维护，因为这样做，我们在查看源代码的时候就可以容易地知道什么Element绑定了什么方法，简单说这样更容易知道一个按钮或链接点击时调了什么方法脚本。
			</p>
			
			<h4>9. 降低代码与XHTML的耦合性</h4>
			<p>
				不要过于依赖DOM的一些内容特征来调用不同的脚本代码，而应该定义不同功能的方法，然后在DOM上调用，这样不管DOM是按钮还是链接，方法的调用都是一样的，比如像下面的实现显然会存在问题： function myBtnClick(obj) { if (/确定/.test(obj.innerHTML)) console.log('OK'); else if (/取消/.test(obj.innerHTML)) console.log('Cancel'); else console.log('Other'); } <a herf="javascript:;" onclick="myBtnClick(this)">确定</a><a herf="javascript:;" onclick="myBtnClick(this)">取消</a>上面例子其实在一个函数内处理了两件事情，应该分成两个函数，像上面的写法，如果把链接换成按钮，比如改成这样：<input type="button" onclick="myBtnClick(this)" value="确定" />，那么myBtnClick函数内部的obj.innerHTML就出问题了，因为此时应该obj.value才对，另外如果把按钮名称由中文改为英文也会出问题，所以这种做法问题太多了。
			</p>
			
			<h4>10. 一个函数应该返回统一的数据类型</h4>
			<p>
				因为JavaScrip是弱类型的，在编写函数的时候有些人对于返回类型的处理显得比较随便，我觉得应该像强类型语言那样返回，看看下面的两个例子： function getUserName(userID) { if (data[userID]) return data[userID]; else return false; } 应该改为： function getUserName(userID) { if (data[userID]) return data[userID]; else return ""; } 这个方法如果在C#中定义，我们知道它准备返回的数据类型应该是字符串，所以如果没有找到这个数据我们就应该返回空的字符串，而不是返回布尔值或其它不合适的类型。这并没有影响到函数将来的调用，因为返回的空字符串在逻辑判断上可被认作"非"，即与false一样，除非我们使用全等于"==="或typeof进行判断。
			</p>
			
			<h4>11. 规范定义JSON对象</h4>
			<p>
				补全双引号使用标准肯定是有好处的，那么为什么还是有人不使用标准呢？我想这可能是懒或习惯问题。也许还会有人跟我说，少写引号可以减轻文件体积，我认为这有道理但不是重点。对于服务器返回的JSON数据，使用标准结构可以利用Firefox浏览器的JSONView插件方便查看（像查看XML那样树形显示），另外你如果使用jQuery做开发，最新版本jQuery1.4+是对JSON格式有更高要求的，具体的可以自己查阅jQuery更新文档。比如：{name:"Tom"}或{'name':'Tom'}都应该改成{"name":"Tom"}。
			</p>
			
			<h4>12. 不在文件中留下未来确定不再使用的代码片段</h4>
			<p>
				当代码调整或重构后，之前编写的不再使用的代码应该及时删除，如果认为这些代码还有一定利用价值可以把它们剪切到临时文件中。留在项目中不仅增加了文件体积，这对团队其它成员甚至自己都起到一定干扰作用，怕将来自己看回代码都搞不懂这方法是干什么的，是否有使用过。当然可以用文档注释标签@deprecated把这个方法标识为不推荐的。
			</p>
			
			<h4>13. 不重复定义其他团队成员已经实现的方法</h4>
			<p>
				对于大型项目，一般会有部分开发成员实现一些通用方法，而另外一些开发成员则要去熟悉这些通用方法，然后在自己编写模块遇到有调用的需要就直接调用，而不是像有些开发者喜欢"单干"，根本不会阅读这些通用方法文档，在自己代码中又写了一遍实现，这不仅产生多余的代码量，当然也是会影响团队开发效率的，这是没有团队合作精神的表现，是重复造轮子的悲剧。比如在通用类文件Common.js有定义function $(elemID){return document.getElementById(elemID)}那么就不应该在Mail.js中再次出现这一功能函数的重复定义，对于一些复杂的方法更应该如此。
			</p>
			
			<h4>14. 调用合适的方法</h4>
			<p>
				当有几个方法都可以实现同类功能的时候，我们还是要根据场景选择使用最合适的方法。下面拿jQuery框架的两个AJAX方法来说明。如果确定服务器返回的数据是JSON应该直接使用$.getJSON，而不是使用$.get得到数据再用eval函数转成JSON对象。如果因为本次请求要传输大量的数据而不得以使用$.post也应该采用指定返回数据类型（设置dataType参数）的做法。如果使用$.getJSON，在代码中我们一眼能看出本次请求服务器返回的是JSON。温馨提示：jQuery1.4后，如果服务器有设置数据输出的ContentType，比如ASP.NET C#设置 Response.ContentType = "application/json"，那么$.get将与$.getJSON的使用没有什么区别。
			</p>
			
			<h4>15. 使用合适的控件存储合适的数据</h4>
			<p>
				曾发现有人利用DIV来保存JSON数据，以待页面下载后将来使用，像这样：<div id="json">{ "name":"Tom"}</div>，显然这个DIV不是用来界面显示的，如果非要这样做，达到使用HTML文件进行数据缓存的作用，至少改成用隐藏域来存这数据更合理，比如改成：&lt;input type="hidden" value=" { 'name':'Tom'}" /&gt;。其实也可以利用window对象来保存一些数据，像上面的例子，我们可以在AJAX请求页直接包含这样的脚本块：<script>window.userData = { "name":"Tom"};</script>，当在AJAX请求回调函数中执行完$( "#MyDiv ").html(data)后，在window上就马上有了这一变量。如果采用第一种方法，将不可避免eval(document.getElementById("UserData").innerHTML)。如果在window对象存放大量数据的话，这些数据不用时要及时手动清理它们，它们是要等浏览器刷新或重启后才会消失的，这就会增加内存开销。
			</p>
			
			<h4>16. 永远不要忽略代码优化工作</h4>
			<p>
				代码最优化是每个程序员应该努力达到的目标，也应该成为程序员永远的追求。写代码的时候，不应该急着把功能实现出来，要想一下如何写代码，代码的执行效率才是较好的。举个例子：假设有定义getElementById的快捷方法functoin $(elemID){return document.getElementById(elemID)}，那么有人可能会写出这样的代码$("MyDiv").parentNode.removeChild($("MyDiv"))，其实这里执行了两次getElementById DOM查找，如果改成这样将更好：var myDiv = $("MyDiv"); myDiv.parentNode.removeChild(myDiv)。还好getElementById的DOM查找算比较快，如果换成getElementsByTagName则更应该注重优化了。jQuery开发团队也有提醒大家要注意这方面的问题。当然，代码优化技巧也是需要个人不断积累的。曾有朋友跟我说他写网站后台代码从来不用考虑优化的，因为他们网站用的是至强四核服务器，我觉得这是很可笑的。
			</p>

			<h4>17. 会分析策划文档</h4>
			<p>
				能用面向对象方法进行接口定义和代码组织这一能力对于每一个程序员来说都是非常重要的，这也是决定一个程序员水平高低的一个重要因素。能够把需求细化并抽象出不同的类，然后有条理地编写代码，使代码结构清晰，可读性高，代码易于维护，不至于太过程化而且杂乱无章，这样才算是一个优秀的程序员。
			</p>
		</div>
	</div>

	
	<div id="mokuaihua">
		<h1>对模块化开发的理解</h1>
		<div>
			所谓的模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础就是函数<br>
			 <h4>（一）使用函数封装</h4>
			<p>这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。</p>
			 <h4>（二）使用对象封装 </h4>
			 <p>为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。这样做也是有问题的，变量可以被外面随意改变而导致不安全。</p>
			 <h4>（三）立即执行函数写法 </h4>
			 <p>使用"立即执行函数"（Immediately-Invoked FunctionExpression，IIFE），可以达到不暴露私有成员的目的。这个也是闭包处理的一种方式。外部代码无法读取内部的变量。</p>
			 <h4>（四）放大模式</h4>
			 <p>如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。在原有的基础上扩展更多的方法。</p>
			 <pre>
			 	var obj =(function (mod){  
　　　　			mod.func3= function () {  
　　　　　　			//...  
　　　　			};  
　　　　			returnmod;//方便方法连续调用  
				})(obj);
			</pre>
			上面的代码为obj模块添加了一个新方法func3 ()，然后返回新的obj模块，方便方法连续调用。如何防止obj为null或underfined的情况了？ <br>
			 <h4>（五）宽放大模式（Loose augmentation）</h4>
			 <p>在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上面的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。</p>
			 <pre>
			 	var obj =( function (mod){  
　　					//...  
　　					returnmod;  
				})(window.obj|| {});//确保对象不为空  
			 </pre>
			 与"放大模式"相比，＂宽放大模式＂就是"立即执行函数"的参数可以是空对象，解决了非空问题。
			 <h4>（六）输入全局变量</h4>
			 <p>独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。为了在模块内部调用全局变量，必须显式地将其他变量输入模块。</p>
			 <pre>
			 	(function(window, undefined ) {  
  					……  
				})(window );  
			 </pre>
			 这是jQuery框架的源码，将window对象作为参数传入，这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。
		</div>    
	</div>
	
	<div id="youhua">
		<h1>前端性能优化之yahoo军规</h1>
		<div>
			<div>
				<h4>1.尽量减少http请求数（内容）</h4>
				<div>
					<p>
					80%的终端用户响应时间都花在前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本等等。减少组件数，必然能减少http请求数。这是让页面更快的关键。</p>

					<p>减少页面组件的一种方式就是简化页面设计。如何在构建复杂页面的同时加快响应时间？</p>
				
					<p>
						a.合并文件：通过把所有脚本放在一个文件中的方式来减少请求数。<br>
						b.CSS Sprites是减少图片请求数量的首选方式。把背景图整合到一张图片中，然后用css的background-image和background-position属性来定位要显示的部分。
					</p>
				</div>
				
			</div>
			<div>
				<h4>2.使用CDN（服务器）</h4>
				<div>
					<p>
					用户与服务器的物理距离对响应时间也有影响。把内容部署在多个地理位置分散的服务器上能让用户更快的载入页面。
				</p>
				</div>
				
			</div>
			<div>
				<h4>3.添上Expires或者Cache-Control HTTP头（服务器）使用缓存</h4>
				<div>
					<p>对于静态组件：通过设置一个遥远的将来时间作为Expires来实现永不失效。</p>
					<p>对于动态组件：用合适的Cache-Control HTT头来让浏览器进行条件性的请求。</p>
				</div>
				
			</div>
			<div>
				<h4>4.使用Gzip组件（服务器）</h4>
				<div>
					<p>
						前端工程师可以想办法明显的缩短通过网络传输HTTP请求和响应的时间。但，终端用户的宽带速度，网络服务商，对等交换点的距离等等，都是开发团队无法控制的。但还有别的能够影响响应时间的因素，压缩减少HTTP响应的大小来缩短响应时间。
					</p>
					<p>尽可能多地用gzip压缩能够给页面减肥，这也是提升用户体验最简单的方法。</p>
				</div>
			</div>
			<div>
				<h4>5.把样式表放在顶部（CSS）</h4>
				<div>
					<p>把样式表放到文档的head部分，提前加载，让页面逐步渲染，避免因为样式变动而重绘页面元素。
					</p>
				</div>
			</div>
			<div>
				<h4>6.把脚本放在底部（JavaScript）</h4>
				<div>
					<p>
						脚本会阻塞并行下载，把他放到页面底部，推迟下载，页面可以更快的载入。
					</p>
				</div>
			</div>
			<div>
				<h4>7.避免使用CSS表达式（CSS）</h4>
				<div></div>
			</div>
			<div>
				<h4>8.把JavaScript和CSS放到外面</h4>
				<div>
					<p>
						实际上，用外部文件可以让页面更快，因为JavaScript和CSS文件会被缓存在浏览器。
					</p>
				</div>
			</div>
			<div>
				<h4>9.压缩JavaScript和CSS</h4>
				<div>
					<p>
						压缩具体来说就是从代码中去除不必要的字符以减少大小，从而提升加载速度。
					</p>
				</div>
			</div>
			<div>
				<h4>10.延迟加载组件（内容）</h4>
				<div>
					<p>
						一开始渲染页面所必须的，其余内容可以等会儿再加载
					</p>
				</div>
			</div>
			<div>
				<h4>11.预加载组件（内容）</h4>
				<p>
					通过预加载组件可以充分利用浏览器空闲的时间来请求将会用到的组件。用户访问下一页的时候，大部分组件已经在缓存里了，所以在用户看来页面会加载的更快。
				</p>
			</div>
			<div>
				<h4>12.减少DOM元素的数量</h4>
				<div>
					<p>
						使用更好的语义化标记。
					</p>
				</div>
			</div>
			<div>
				<h4>13.尽量少用iframe</h4>
				<div>
					<p>
						优点：引入缓慢的第三方内容，比如标志和广告；安全沙箱；并行下载脚本；<br>
						缺点：会阻塞页面加载；非语义
					</p>
				</div>
			</div>
			<div>
				<h4>14.杜绝404</h4>

			</div>
			<div>
				<h4>15.尽量减少DOM访问</h4>
				<div>
					<p>
						用JavaScript访问DOM元素是很慢的，可以：1.缓存已经访问过的元素的索引；2.先“离线”更新节点，再把它们添加到DOM树上；3.免用JavaScript修复布局问题
					</p>
				</div>
			</div>
			<div>
				<h4>16.选择link舍弃@import</h4>
				<div></div>
			</div>
			
			<div>
				<h4>17.优化图片</h4>
				<div>
					<p>
						合理设置sprite图片。	
					</p>
				</div>
			</div>

			<div>
				<h4>18.不要用HTML缩放图片</h4>
				<div>
					<p>
						不要因为在HTML中可以设置宽高而使用本不需要的大图。
					</p>
				</div>
			</div>

			<div>
				<h4>19.避免图片src属性为空</h4>
				<div>
					<p>
						即使属性为空也会向服务器发送一个请求。
					</p>
				</div>
			</div>
		</div>
	</div>

	<div id="MVC">
		<h1>MVC模式</h1>
		<div>
			<p>
				M：model,模型，就是业务数据，前端项目中就是js变量</p>
			<p>
				V：view，视图，就是业务数据在用户面前的展示，前端项目中就是HTML</p>
			<p>
				C：controller，控制器，负责业务数据的增删改查，前端项目中就是function
			</p>
			
		</div>
		<div>
			<h4>三者之间的关系</h4>
			<p>
				1、通过controller获取业务数据，此时model中模型数据状态发生改变，model通知view业务数据发生了改变，view查询model中的数据并将数据自动显示在页面上。</p>
			<p>	
				2、view接收用户操作，通知controller修改数据，controller负责数据的修改，数据修改后，model状态发生改变，model通知view，状态已改变，view查询model数据，并将数据自动刷新和显示
			</p>
			<p>
				模型在状态变化的时候，直接通知所有视图，视图向模型查询状态数据，然后刷新自身。当用户发出操作时，视图把消息发给控制器，控制器按照业务逻辑进行处理，需要查询或更新数据时，控制器会调用模型。
			</p>
			<p>
				<b>*   Model（模型）</b><br>
			      模型包含应用程序的核心功能。模型封装了应用程序的状态。有时它包含的唯一功能就是状态。它对视图或控制器一无所知。
			</p>
			<p>
			    <b>* View（视图）</b><br>
			      视图提供模型的表示。它是应用程序的 外观。视图可以访问模型的读方法，但不能访问写方法。此外，它对控制器一无所知。当更改模型时，视图应得到通知。
			</p>
			<p>
			    <b>* Controller（控制器）</b><br>
			      控制器对用户的输入作出反应。它创建并设置模型。

			</p>
		</div>
	</div>

	<div id="angular">
		<h1>Angular.js</h1>
		<div>
			<h4>ng中双向数据绑定原理</h4>
			<p>
				原理就是，Angular 在 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发，遍历所有的 $watch，最后更新 dom。
			</p>
		</div>
		<div>
			<h4>ng-router实现原理</h4>
			<p>
				ng应用中，地址栏里面有“#”后面的内容其实就是一个hash，js中有的带有原生的API能检测hash内容是否改变，如果改变则执行controller中的一些方法。如果原生不支持这个API，则会调用一个计时器，实时检测hash的改变，即ng自定义的方法。
			</p>
		</div>
		<div>
			<h4>ng-repeat当数组中有两个相同的内容时会出现什么样的问题？</h4>
			<p>其实是ng-repeat会循环渲染出两个相同的DOM，而这两个相同的DOM在后续操作的过程中可能会出现问题：本来想修改其中一个，但结果是修改了另一个。</p>
		</div>
		<div>
			<h4>ng中controller和service之间的关系</h4>
			<p>
				标准的ng流程是：当有数据需要进行逻辑处理的时候，会调用service，然后调用factory，在factory中处理进行数据的处理，最终将处理完之后的数据传给controller，controller将数据给view进行页面内容的更新。
				但国内有70%-80%的人都是将数据放在controller里进行处理，然后给view进行页面更新，导致没有了service这一层，但这样的结果是controller将变得很大很重，项目维护起来不方便。
			</p>
		</div>
		<div>
			<h4>ng指令有哪些</h4>
			<p>ngRepeat、ngIf、ngShow、ngHide、ngInit、ngClick</p>
		</div>
		<div>
			<h4>ng中如何实现数据排序？过滤器如何使用？如何自定义过滤器？</h4>
			<p>
				使用ng内置filter：orderby <br>
				过滤器有两种使用方法：一种是直接在页面中使用双花括号 {{now | date : 'yyyy-MM-dd'}}，一种是在js里面以函数的形式使用 $filter('date')(now, 'yyyy-MM-dd hh:mm:ss');。<br>
				自定义过滤器：app.filter("过滤器名称",function(){ return function("需要过滤的对象","过滤参数"...){return "处理后的对象"}})
			</p>
		</div>
		<div>
			<h4>ng中模块之间如何通信？</h4>
			<p>
				共用服务:在 Angular 中，通过 factory 可以生成一个单例对象，在需要通信的模块 a 和 b 中注入这个对象即可。.
			</p>
			
			<p>
				一种是借助父 controller。在子 controller 中向父 controller 触发（$emit）一个事件，然后在父 controller 中监听（$on）事件，再广播（$broadcast）给子 controller ，这样通过事件携带的参数，实现了数据经过父 controller，在同级 controller 之间传播。
			</p>

			<p>
				一种是借助 $rootScope。每个 Angular 应用默认有一个根作用域 $rootScope， 根作用域位于最顶层，从它往下挂着各级作用域。所以，如果子控制器直接使用 $rootScope 广播和接收事件，那么就可实现同级之间的通信。
			</p>
		</div>
	</div>

	<div id="kuayu">
		<h1>跨域问题</h1>
		<div>
			<h4>1.什么是跨域</h4>
			<p>
				跨域指的是浏览器不能执行其他网站的脚本，他是有浏览器的同源策略造成的是浏览器对JavaScript施加的安全限制
			</p>
		</div>
		<div>
			<h4>2.解决办法</h4>
			<div>
				<h4>
					(1)使用document.domain+iframe的设置
				</h4>
				<p>
					对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。具体的做法是可以在
					http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上 document.domain = ‘a.com’；
					然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以 
					“交互”了。
				</p>
				<p>
					这种办法只能解决主域相同而二级域名不同的情况
				</p>
			</div>
			<div>
				<h4>(2)动态创建script</h4>
				<p>
					虽然浏览器默认禁止了跨域访问，但并不禁止在页面中引用其他域的JS文件，并可以自由执行引入的JS文件中的function（包括操作cookie、Dom等等）。根据这一点，可以方便地通过创建script节点的方法来实现完全跨域的通信。
				</p>
			</div>
			<div>
				<h4>(3)jsonp</h4>
				<p>
					JSONP的最基本的原理是：动态添加一个script标签，而script标签的src属性是没有跨域的限制的。
					动态创建script标签，通过scr属性发送请求，从而获取数据。（向第三方发送请求并传入接收响应数据的回调函数名，当第三方接收到响应时，会调用请求发送传过来的函数，将请求数据传入，返回一个object类型的数据）
				</p>
				<p>
					它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。 
				</p>
			</div>
		</div>
	</div>

	<div id="httpRequst">
		<h4>一次完整的HTTP请求所经历的7个步骤</h4>
		<div>
			<p>
				HTTP通信机制是在一次完整的HTTP通信过程中，Web浏览器与Web服务器之间将完成下列7个步骤：
			</p>
			<h5>
				1. 建立TCP连接
			</h5>
			<p>
				在HTTP工作开始之前，Web浏览器首先要通过网络与Web服务器建立连接，该连接是通过TCP来完成的，该协议与IP协议共同构建Internet，即著名的TCP/IP协议族，因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议，根据规则，只有低层协议建立之后才能进行更高层协议的连接，因此，首先要建立TCP连接，一般TCP连接的端口号是80。
			</p>
			<h5>2. Web浏览器向Web服务器发送请求命令 </h5>
			<p>
				一旦建立了TCP连接，Web浏览器就会向Web服务器发送请求命令。例如：GET/sample/hello.jsp HTTP/1.1。
			</p>
			<h5>3. Web浏览器发送请求头信息 </h5>
			<p>
				浏览器发送其请求命令之后，还要以头信息的形式向Web服务器发送一些别的信息，之后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。
			</p>
			<h5>4. Web服务器应答 </h5>
			<p>
				客户端浏览器向服务器发出请求后，服务器会向客户端浏览器回送应答， HTTP/1.1 200 OK，应答的第一部分是协议的版本号和应答状态码。
			</p>
			<h5>5. Web服务器发送应答头信息 </h5>
			<p>
				正如客户端会随同请求发送关于自身的信息一样，服务器也会随同应答向用户发送关于它自己的数据及被请求的文档。
			</p>
			<h5>6. Web服务器向浏览器发送数据 </h5>
			<p>
				Web服务器向浏览器发送头信息后，它会发送一个空白行来表示头信息的发送到此为结束，接着，它就以Content-Type应答头信息所描述的格式发送用户所请求的实际数据。
			</p>
			<h5>7. Web服务器关闭TCP连接 </h5>
			<p>
				一般情况下，一旦Web服务器向浏览器发送了请求数据，它就要关闭TCP连接，然后如果浏览器或者服务器在其头信息加入了这行代码：Connection:keep-alive,TCP连接在发送后将仍然保持打开状态，于是，浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。
			</p>
		</div>
		</div>

	<div class="interview" id="interviewHtml">
		<h4>面试题--HTML</h4>
		<div>
			<ul>

				<li>
					1、Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
					<p>
						（1）声明位于文档中的最前面，处于所有标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。<br>
						（2）严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。<br>
						（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。<br>
						（4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
					</p>
				</li>

				<li>
					2、HTML5 为什么只需要写 &lt;!DOCTYPE HTML&gt;？
					<p>
						html5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们应该的方式来运行）<br>
						而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
					</p>
				</li>

				<li>
					3、如何区分 HTML 和 HTML5？
					<p>
						（1）在文档类型声明上不同：

						HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。<br>

						（2）在结构语义上不同：

						HTML：没有体现结构语义化的标签，通常都是这样来命名的&lt;div id="header"&gt;&lt;/div&gt;，这样表示网站的头部。

						HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：&lt;header&gt;&lt;article&gt;&lt;footer&gt;
					</p>
				</li>

				<li>
					4、简述一下你对HTML语义化的理解？
					<p>
						（1）用正确的标签做正确的事情；<br>

						（2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；<br>

						（3）即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的；<br>

						（4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；<br>

						（5）使于都源代码的人对网站更容易将网站分块，便于阅读维护理解。
					</p>
				</li>

				<li>
					5、link 和@import 的区别是？
					<p>
						（1）link属于XHTML标签，而@import是CSS提供的;<br>
						（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;<br>
						（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;<br>
						（4）link方式的样式的权重 高于@import的权重。
					</p>
				</li>

				<li>
					6、行内元素有哪些？块级元素有哪些？
					<p>
						（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。<br>
						（2）行内元素有：a b span img input select strong（强调的语气） <br>
						（3）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
					</p>
				</li>

				<li>
					7、介绍一下你对浏览器内核的理解？
					<p>
						IE: trident内核<br>
						Firefox：gecko内核<br>
						Safari：webkit内核<br>
						Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核<br>
						Chrome：Blink(基于webkit，Google与Opera Software共同开发)
					</p>
				</li>
				
				<li>
					8、Html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
					<p>
						新特性，新增元素：<br>

						1）内容元素：article、footer、header、nav、section<br>

						2）表单控件：calendar、date、time、email、url、search<br>

						3）控件元素：webworker，websockt，Geolocation<br><br>

						移除元素：<br>

						1）显现层元素：basefont，big，center，font，s，strike，tt，u<br>

						2）性能较差元素：frame，frameset，noframes<br><br>

						处理兼容问题有两种方式：<br>

						1）IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。<br>

						2）使用是html5shim框架<br>

						另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构，功能元素来加以区分。
					</p>
				</li>

				<li>
					8、常见兼容性问题？
					<p>
						（1）png24位的图片在IE6浏览器上出现背景；<br>

						解决方案是：做成PNG8；<br><br>

						（2）浏览器默认的 margin 和 padding 不同。<br>

						解决方案是：加一个全局的*{margin:0;padding:0;}来统一。<br><br>

						（3）IE6双边距bug：块属性标签float后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。浮动IE产生的双倍距离 #box{float:left;width:10px;margin:0 0 0 100px;} 这种情况下IE6会产生200px的距离。<br>

						解决方法：加上_display：inline，使浮动忽略<br><br>

						（4）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性； Firefox下，只能使用getAttribute()获取自定义属性。<br>

						解决方法：统一通过getAttribute()获取自定义属性。<br><br>

						（5）IE下，even对象有x，y属性，但是没有pageX，pageY属性，但是没有x，y属性；<br>

						解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。<br><br>

						（6）Chrome中文界面下默认会将小于 12px 的文本强制按照 12px 显示<br>

						解决方法：可通过加入 CSS 属性 -webkt-text-size-adjust:none;解决<br><br>

						（7）超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active ；<br>

						解决方法：改变CSS属性的排列顺序：L-V-H-A: a:link{ }  a:visited{ } a:hover{ } a:active{ } <br><br>
					</p>
				</li>

				<li>
					简述同步和异步的区别
					<p>
						同步是阻塞模式，异步是非阻塞模式。<br>

						同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；<br>

						异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
					</p>
				</li>
				
				<li>
					
				</li>

			</ul>	
		</div>
	</div>


	<div class="top">
		<a href="#top">toTop</a>
	</div>
	</div>



	<script>
		// 数组去重
		function unique1(arr){
			var newArr = [];
			var len = arr.length;
			for(var i=0;i<len-1;i++){
				if(newArr.indexOf(arr[i])<0){
					newArr.push(arr[i]);
				}
			}
			return newArr;
		}
		var arr1 = [1,2,1,3,5,3,4,8,6,5,2];
		var unique11 = unique1(arr1);
		console.log(unique11)

		function unique2(arr){
			arr.sort();
			console.log(arr)
			var newArr = [];
			newArr[0] = arr[0];
			var len = arr.length;
			for(var i=1;i<len;i++){
				if(newArr[newArr.length-1]!=arr[i]){
					newArr[newArr.length]=arr[i];
				}
			}
			return newArr;
		}
		var unique22 = unique2(arr1);
		console.log(unique22);


		function A(){}
		A.prototype = {};
		var a =new A();
		console.log(a instanceof A);
		console.log(A.prototype.constructor);

		var aFunction = function() {};  //一个函数
	    aFunction.aProperty = "Property of function";  //函数的一个属性
	    aFunction.aMethod = function(){console.log("Method of function")}; //函数的一个方法
	    //主要看下面：
	    console.log(aFunction["aProperty"]);   //可以将函数当数组以属性名作为下标来访问属性
	    aFunction["aMethod"]();          //可以将函数当数组以方法名作为下标来调用方法
	    for( var s in aFunction)           //遍历函数的所有属性和方法进行迭代化处理
	        console.log(s + " is a " + typeof(aFunction[s]));
	</script>
</body>
</html>